<template>
    <div id="accountDetail">
        <el-button @click="$router.go(-1)" type="btn bnt-success">返回</el-button>
        <table class="table table-bordered table-hover" >
            <caption>账户详情</caption>
            <tbody>
            <tr>
                <td>帐户名</td>
                <td>
                    {{accountInfo.accountName}}
                </td>
                <td>密码</td>
                <td>{{accountInfo.password}}</td>
            </tr>
            <tr>
                <td>描述</td>
                <td>{{accountInfo.description}}</td>
                <td>昵称</td>
                <td>{{accountInfo.nickName}}</td>
            </tr>
            <tr>
                <td>邮箱地址</td>
                <td>{{accountInfo.emailAddress}}</td>
                <td>邮箱密码</td>
                <td>{{accountInfo.emailPassword}}</td>
            </tr>
            <tr>
                <td>真名</td>
                <td>{{accountInfo.realName}}</td>
                <td>学校</td>
                <td>{{campus}}</td>                
            </tr>
            <tr>
                <td>角色名称</td>
                <td>
                    <el-row>
                        <el-col :span="5" v-for="(item,key) in roles" :key="key">
                        {{item.roleName }}
                        </el-col>
                    </el-row>
                </td>
            </tr>

            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data(){
        return {
            accountInfo: {},
            roles: [],
            campus: '',
        }
    },
    computed:{
        
    },
    created(){
        // 个人详情信息 /backstage/account/find
        // var accountInfoURL = window.baseURL+this.$route.meta.accountInfoURL+;
        var accountId = this.$route.params.accountId || sessionStorage.getItem("accountId");
        var url = window.baseURL + "/backstage/account/find?accountId="+accountId+"&token="+this.$token;
        this.$http.get(url)
        .then((response)=>{
            this.accountInfo = response.data.data;
        })
        .catch((error)=>{
        })
        // 该用户下的所有角色列表
        var accountRolesURL = window.baseURL + "/backstage/account/getRoles?accountId="+accountId+"&token="+this.$token;
        this.$http.get(accountRolesURL)
        .then((response)=>{
            this.roles = response.data.data;
        })
        .catch((error)=>{
        })
    },
    watch:{
        accountInfo(value){
            var campusId = value.campusId;
            var campusURL = window.baseURL+'/backstage/campus/find?id='+campusId+"&token="+this.$token;
            this.$http.get(campusURL)
            .then((response)=>{
                this.campus = response.data.data.campusName;
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    #accountDetail {
        z-index: 100;
        padding: 50px;
        position: absolute;
        top: 0px;
        bottom: 0;
        right: 0;
        left: 0;
        background: white;
        tr {
            width: 100%;
            td {
                width: 25%;
                text-align: center;
                vertical-align: middle;
                &:nth-child(2n-1){
                   
                }
            }
        }
    }
</style>
